<style lang="less">
.videocss{
	width: 100vw;
	height: 500rpx;
}
.title{
	font-size: 45rpx;
	font-weight: 500;
	padding:10rpx 30rpx;
	line-height: 60rpx;
}
.box_peo{
	padding: 0 30rpx;
	margin: 10rpx 0 20rpx 0; 
	.add_btn{
		width: 100rpx;
		height: 40rpx;
		color: #fff;
		font-size: 23rpx;
		border-radius: 10rpx;
		background: #5ab3ff;
	}
	.peo_left{
		display: flex;
		align-items: center;
		flex: 1;
		&>image{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
		.info{
			margin:  0 0 0 20rpx;
			.nickName{
				font-size: 28rpx;
			}
			.createTime{
				font-size: 23rpx;
				color: #888;
			}
		}
	}
}
.slider{
	width: 100%;height: 20rpx;background: #F3F4F5;
}
.detail_pl{
	padding: 30rpx;
	.title_pl{
		font-size: 32rpx;
		font-weight: 500;
	}
		
}
.nodaat{
	margin: 200rpx auto;
	width: 100%;
	font-size: 25rpx;
	color: #CCC8C8;
}
</style>
<template>
	<view>
		<view class="" :style="'height:' + statusBarHeight +'px'" ></view>
		<video autoplay class="videocss" :src="videoSrc" :poster="poster"></video>
		<view class="title">
			{{content.title}}
		</view>
		<view class="flex_r_between box_peo">
			<view class="peo_left">
				<image :src="content.headImage" mode=""></image>
				<view class="info">
					<view class="nickName">
						{{content.nickName}}
					</view>
					<view class="createTime">
						{{showtime(content.createTime)}}
					</view>
				</view>
			</view>
			<view class="add_btn flex_center">
				关注
			</view>
		</view>
		<view class="slider"></view>
		<view class="detail_pl">
			<view class="title_pl">
				全部评论
			</view>
			<view class="nodaat flex_center">
				暂无评论
			</view>
		</view>
	</view>
</template>

<script>
	// import { showtime } from '../../static/js/util.js'
	import { minxinAjax } from '../../static/js/mixin.js'
	export default {
		data() {
			return {
				videoSrc:'',
				poster:'',
				content:{},
				type:2,
				newsId:null
			};
		},
		mixins:[minxinAjax],
		onLoad(e) {
			// console.log(e.url)
			this.newsId = e.id
			let _this = this
			uni.request({
				url:e.url,
				method:'get',
				success(res) {
					// if()
					// console.log(res.data.data)
					// _this.$nextTick(function(){
						
					// })
					_this.videoSrc = res.data.data.url
					_this.poster = res.data.data.cover[0].src
					_this.content = {...res.data.data}
				}
			})
		},
		methods:{
				showtime(time) {
					let date =
						typeof time === "number" ?
						new Date(time) :
						new Date((time || "").replace(/-/g, "/"));
					let diff = (new Date().getTime() - date.getTime()) / 1000;
					let dayDiff = Math.floor(diff / 86400);
				
					let isValidDate =
						Object.prototype.toString.call(date) === "[object Date]" &&
						!isNaN(date.getTime());
				
					if (!isValidDate) {
						// window.console.error("不是有效日期格式");
					}
					const formatDate = function(date) {
						let today = new Date(date);
						let year = today.getFullYear();
						let month = ("0" + (today.getMonth() + 1)).slice(-2);
						let day = ("0" + today.getDate()).slice(-2);
						let hour = today.getHours();
						let minute = today.getMinutes();
						let second = today.getSeconds();
						// return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
						return `${year}-${month}-${day}`;
					};
					if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) {
						return formatDate(date);
					}
					return (
						(dayDiff === 0 &&
							((diff < 60 && "刚刚") ||
								(diff < 120 && "1分钟前") ||
								(diff < 3600 && Math.floor(diff / 60) + "分钟前") ||
								(diff < 7200 && "1小时前") ||
								(diff < 86400 && Math.floor(diff / 3600) + "小时前"))) ||
						(dayDiff === 1 && "昨天") ||
						(dayDiff < 7 && dayDiff + "天前") ||
						(dayDiff < 31 && Math.ceil(dayDiff / 7) + "周前")
					);
				},
		}
	}
</script>


